<template>
	<div class="tinymce-editor">
		<Editor :id="tinymceIde" :init="init" :disabled="disabled" v-model="myValue" @onClick="onClick()"></Editor>
		<!-- <input type="button" id="login" class="loginbtn" onclick="login();"  /> -->
		<!-- <input type="button" id="login" class="loginbtn" onclick="login();"  /> -->
	</div>
</template>


<script>
	import axios from 'axios'
	import tinymce from 'tinymce/tinymce' // tinymce默认hid.0den，不引入不显示
	import Editor from '@tinymce/tinymce-vue' // 编辑器引入
	// import Editor from '@tinymce/tinymce-vue'
	import 'tinymce/themes/silver/theme' // 编辑器主题
	import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
	// 引入编辑器插件（基本免费插件都在这儿了）
	import 'tinymce/plugins/advlist' // 高级列表
	import 'tinymce/plugins/autolink' // 自动链接
	import 'tinymce/plugins/link' // 超链接
	import 'tinymce/plugins/image' // 插入编辑图片
	import 'tinymce/plugins/lists' // 列表插件
	import 'tinymce/plugins/charmap' // 特殊字符
	import 'tinymce/plugins/media' // 插入编辑媒体
	import 'tinymce/plugins/wordcount' // 字数统计
	import 'tinymce/plugins/table' // 表格
	import 'tinymce/plugins/code' // Code
	import 'tinymce/plugins/pagebreak' // pagebreak
	import 'tinymce/plugins/paste' // paste
	import 'tinymce/plugins/directionality' // directionality
	import 'tinymce/plugins/fullscreen' // fullscreen
	import 'tinymce/plugins/preview' // preview
	import 'tinymce/plugins/searchreplace' // searchreplace
	import 'tinymce/plugins/codesample' // codesample
	import 'tinymce/plugins/hr' // bbcode
	import 'tinymce/plugins/emoticons' // emoticons
	import Cookies from 'js-cookie'
	const fonts = [
		'宋体=宋体',
		'微软雅黑=微软雅黑',
		'新宋体=新宋体',
		'黑体=黑体',
		'楷体=楷体',
		'隶书=隶书',
		'Courier New=courier new,courier',
		'AkrutiKndPadmini=Akpdmi-n',
		'Andale Mono=andale mono,times',
		'Arial=arial,helvetica,sans-serif',
		'Arial Black=arial black,avant garde',
		'Book Antiqua=book antiqua,palatino',
		'Comic Sans MS=comic sans ms,sans-serif',
		'Courier New=courier new,courier',
		'Georgia=georgia,palatino',
		'Helvetica=helvetica',
		'Impact=impact,chicago',
		'Symbol=symbol',
		'Tahoma=tahoma,arial,helvetica,sans-serif',
		'Terminal=terminal,monaco',
		'Times New Roman=times new roman,times',
		'Trebuchet MS=trebuchet ms,geneva',
		'Verdana=verdana,geneva',
		'Webdings=webdings',
		'Wingdings=wingdings,zapf dingbats'
	]
	export default{
		props: {
			// 内容
			// triggerChange:null,
			value: String,
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 3.2.8
				// 初始化配置
				tinymceIde: 'tinymce',
				myValue: this.value,
				init: {
					selector: '#tinymce',
					language_url: '/tinymce/langs/zh_CN.js', // 汉化路径是自定义的，一般放在public或static里面
					language: 'zh_CN',
					skin_url: '/tinymce/skins/ui/oxide', // 皮肤                                                                                                                       //1  emoticons
					plugins: 'hr codesample preview searchreplace fullscreen advlist autolink link image lists charmap  media wordcount table code  pagebreak paste directionality  ', // 插件
					emoticons_append: {
						custom_mind_explode: {
							keywords: ['brain', 'mind', 'explode', 'blown'],
							char: '🤯'
						}
					},
					toolbar: [
						'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo  removeformat subscript superscript code codesample',
						'hr bullist numlist link image preview anchor pagebreak insertdatetime media table emoticons  forecolor backcolor fullscreen '
					],
					// fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',  //字体大小
					toolbar_location: '/',
					font_formats: fonts.join(';'),
					height: 500, // 高度
					placeholder: '在这里输入文字',
					branding: false, // 隐藏右下角技术支持
					// 图片上传
					images_upload_handler: function(blobInfo, success, failure) {
						if (blobInfo.blob().size / 1024 / 1024 > 2) {
							failure('上传失败，图片大小请控制在 2M 以内')
						} else {
							const params = new FormData()
							params.append('file', blobInfo.blob())
							params.append('sourceTable', 'harmonize_knowledge_article')
							// 自己后台的上传接口
							const xhr = new XMLHttpRequest()
							xhr.withCredentials = false
							xhr.open('POST', 'http://192.168.1.54:8081/upload/admin')
							xhr.send(params)
							xhr.onload = function() {
								const json = JSON.parse(xhr.responseText)
								success(json.url)
							}
						}
					}
				}
			}
		},
		watch: {
			// 监听内容变化
			value(newValue) {
				this.myValue = (newValue == null ? '' : newValue)
			},
			myValue(newValue) {
				if (this.triggerChange) {
					this.$emit('change', newValue)
				} else {
					this.$emit('input', newValue)
				}
			}
		},
		mounted() {
			tinymce.init({})
			console.log(this.toolbar, '======')
		},
		methods: {
			onClick(e) {
				this.$emit('onClick', e, tinymce)
			},
			// 可以添加一些自己的自定义事件，如清空内容
			clear() {
				this.myValue = ''
			}
		},
		components: {
			Editor
		},
	}
</script>
<style scoped="scoped" lang="less">
	
</style>